<template>
	<view class="container">
		<view class="topOptionsBox">
			<view class="topOptions" @click="chooseUser(index)" :class="chooseUserIndex == index?'chooseUser':''" v-for="(item,index) in list" :key="index">{{item.name?item.name:'姓名'}}</view>
			<view class="topOptions topOptionsButton" @click="addUser">
				添加
			</view>
		</view>
		<view class="title">共同生活成员家庭情况</view>
		<view v-for="(item,index) in list" v-if="chooseUserIndex == index" :key="index">
			<image class="uploadFile" src="/static/kancha/uploadFile.png"></image>
			<view class="options">
				<view class="optionsLeft">姓名</view>
				<input type="text" v-model="item.name" value="" class="optionsRight" placeholder="请填写姓名"/>
			</view>
			<picker mode="selector" range-key="name" :range="xingbie" @change="selectChange('xingbie',index,$event)">
				<view class="options">
					<view class="optionsLeft">性别</view>
					<view class="optionsRight">
						<view class="personNum">{{xingbie[item.xingbieIndex].name}}</view>
						<image class="sanjia" src="/static/kancha/sanjiao.png"></image>
					</view>
				</view>
			</picker>
			<view class="options">
				<view class="optionsLeft">身份证号</view>
				<input type="text" value="" class="optionsRight" placeholder="请填写身份证号"/>
			</view>
			<view class="options">
				<view class="optionsLeft">居住证号</view>
				<input type="text" value="" class="optionsRight" placeholder="请填写居住证号"/>
			</view>
			<picker mode="selector" range-key="name" :range="minzu" @change="selectChange('minzu',index,$event)">
				<view class="options">
					<view class="optionsLeft">民族</view>
					<view class="optionsRight">{{minzu[item.minzuIndex].name}}</view>
				</view>
			</picker>
			<picker mode="selector" range-key="name" :range="zhengzhimianmao" @change="selectChange('zhengzhimianmao',index,$event)">
			<view class="options">
				<view class="optionsLeft">政治面貌</view>
				<view class="optionsRight">
					<view class="personNum">{{zhengzhimianmao[item.zhengzhimianmaoIndex].name}}</view>
					<image class="sanjia" src="/static/kancha/sanjiao.png"></image>
				</view>
			</view>
			</picker>
			<picker mode="selector" range-key="name" :range="wenhuachengdu" @change="selectChange('wenhuachengdu',index,$event)">
			<view class="options">
				<view class="optionsLeft">文化程度</view>
				<view class="optionsRight">
					<view class="personNum">{{wenhuachengdu[item.wenhuachengduIndex].name}}</view>
					<image class="sanjia" src="/static/kancha/sanjiao.png"></image>
				</view>
			</view>
			</picker>
			<picker mode="selector" range-key="name" :range="hunyinzhuangkuang" @change="selectChange('hunyinzhuangkuang',index,$event)">
			<view class="options">
				<view class="optionsLeft">婚姻状况</view>
				<view class="optionsRight">
					<view class="personNum">{{hunyinzhuangkuang[item.hunyinzhuangkuangIndex].name}}</view>
					<image class="sanjia" src="/static/kancha/sanjiao.png"></image>
				</view>
			</view>
			</picker>
			<picker mode="selector" range-key="name" :range="jiatingguanxi" @change="selectChange('jiatingguanxi',index,$event)">
			<view class="options">
				<view class="optionsLeft">家庭关系</view>
				<view class="optionsRight">
					<view class="personNum">{{jiatingguanxi[item.jiatingguanxiIndex].name}}</view>
					<image class="sanjia" src="/static/kancha/sanjiao.png"></image>
				</view>
			</view>
			</picker>
			<picker mode="selector" range-key="name" :range="chengxiangshuxing" @change="selectChange('chengxiangshuxing',index,$event)">
			<view class="options">
				<view class="optionsLeft">城乡属性</view>
				<view class="optionsRight">
					<view class="personNum">{{chengxiangshuxing[item.chengxiangshuxingIndex].name}}</view>
					<image class="sanjia" src="/static/kancha/sanjiao.png"></image>
				</view>
			</view>
			</picker>
			<view class="wordBox">
				<view class="wordOptions">
					<text>*</text>
					城区是指在市辖区和不设区的市，区、市政府驻地的实际建设连接到的居民委员会和其他区域。
				</view>
				<view class="wordOptions">
					<text>*</text>
					镇区是指在城区以外的县人民政府驻地和其他镇政府驻地的实际建设连接到的居民委员和其他区域。与政府驻地的实际建设不连接，且常住人口在3000人以上的独立的工矿区、开发区等特殊区域及农场、林场的场部驻地视为镇区。
				</view>
				<view class="wordOptions">
					<text>*</text>
					农村指城镇以外的区域。
				</view>
			</view>
			<picker mode="selector" range-key="name" :range="shentizhuangkuang" @change="selectChange('shentizhuangkuang',index,$event)">
			<view class="options">
				<view class="optionsLeft">身体状况</view>
				<view class="optionsRight">
					<view class="personNum">{{shentizhuangkuang[item.shentizhuangkuangIndex].name}}</view>
					<image class="sanjia" src="/static/kancha/sanjiao.png"></image>
				</view>
			</view>
			</picker>
			<picker mode="selector" range-key="name" :range="laodongnengli" @change="selectChange('laodongnengli',index,$event)">
			<view class="options">
				<view class="optionsLeft">劳动能力</view>
				<view class="optionsRight">
					<view class="personNum">{{laodongnengli[item.laodongnengliIndex].name}}</view>
					<image class="sanjia" src="/static/kancha/sanjiao.png"></image>
				</view>
			</view>
			</picker>
			<picker mode="selector" range-key="name" :range="huanbingbingzhong" @change="selectChange('huanbingbingzhong',index,$event)">
			<view class="options">
				<view class="optionsLeft">患病病种</view>
				<view class="optionsRight">
					<view class="personNum">{{huanbingbingzhong[item.huanbingbingzhongIndex].name}}</view>
					<image class="sanjia" src="/static/kancha/sanjiao.png"></image>
				</view>
			</view>
			</picker>
			<picker mode="selector" range-key="name" :range="canjileibie" @change="selectChange('canjileibie',index,$event)">
			<view class="options">
				<view class="optionsLeft">残疾类别</view>
				<view class="optionsRight">
					<view class="personNum">{{canjileibie[item.canjileibieIndex].name}}</view>
					<image class="sanjia" src="/static/kancha/sanjiao.png"></image>
				</view>
			</view>
			</picker>
			<picker mode="selector" range-key="name" :range="canjidengji" @change="selectChange('canjidengji',index,$event)">
			<view class="options">
				<view class="optionsLeft">残疾等级</view>
				<view class="optionsRight">
					<view class="personNum">{{canjidengji[item.canjidengjiIndex].name}}</view>
					<image class="sanjia" src="/static/kancha/sanjiao.png"></image>
				</view>
			</view>
			</picker>
			<picker mode="selector" range-key="name" :range="shenfenleibie" @change="selectChange('shenfenleibie',index,$event)">
			<view class="options">
				<view class="optionsLeft">身份类别</view>
				<view class="optionsRight">
					<view class="personNum">{{shenfenleibie[item.shenfenleibieIndex].name}}</view>
					<image class="sanjia" src="/static/kancha/sanjiao.png"></image>
				</view>
			</view>
			</picker>
			<picker mode="selector" range-key="name" :range="jiuyeqingkuang" @change="selectChange('jiuyeqingkuang',index,$event)">
			<view class="options">
				<view class="optionsLeft">就业情况</view>
				<view class="optionsRight">
					<view class="personNum">{{jiuyeqingkuang[item.jiuyeqingkuangIndex].name}}</view>
					<image class="sanjia" src="/static/kancha/sanjiao.png"></image>
				</view>
			</view>
			</picker>
			<picker mode="selector" range-key="name" :range="jiuxueqingkuang" @change="selectChange('jiuxueqingkuang',index,$event)">
			<view class="options">
				<view class="optionsLeft">就学情况</view>
				<view class="optionsRight">
					<view class="personNum">{{jiuxueqingkuang[item.jiuxueqingkuangIndex].name}}</view>
					<image class="sanjia" src="/static/kancha/sanjiao.png"></image>
				</view>
			</view>
			</picker>
			<view class="bottomOptions">
				<view class="bottomTitle">保险情况</view>
				<view class="bottomOptionsBox">
					<view class="bottomOptionsBoxIn" @click="chooseBaoxian(itemIn)" v-for="(itemIn,index) in item.baoxian" :key="index">
						<image class="chooseIcon" v-if="itemIn.isCheck" src="/static/kancha/choose.png"></image>
						<image class="chooseIcon" v-else src="/static/kancha/nochoose.png"></image>
						<view class="bottomOptionsTitle">{{itemIn.name}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="button" @click="link">
			提交
		</view>
		<view class="bottom"></view>
	</view>
</template>

<script>
	let outData = {
		chooseUserIndex:0
	}
	let info = {
		name:''
	}
	export default {
		data(){
			return Object.assign(outData,JSON.parse(JSON.stringify(this.dataObject)),{
				list:[
					Object.assign({},JSON.parse(JSON.stringify(info)),JSON.parse(JSON.stringify(this.dataObject)))
				]
			})
		},
		onLoad() {
			
		},
		methods: {
			link() {
				uni.redirectTo({
					url: '/pages/getInfo/notFamilyMemberInfo'
				})
			},
			selectChange(e,index,str){
				this.list[index][e+'Index'] = str.detail.value
			},
			chooseBaoxian(item){
				item.isCheck = !item.isCheck
			},
			chooseUser(index){
				console.log(index)
				this.chooseUserIndex = index
			},
			addUser(){
				this.list.push(Object.assign(JSON.parse(JSON.stringify(info)),JSON.parse(JSON.stringify(this.dataObject))))
			}
		}
	}
</script>
<style>
	page {
		background: white;
	}
</style>
<style scoped>
	.topOptionsBox{
		display: flex;
		flex-wrap: wrap;
	}
	.topOptions{
		line-height: 60rpx;
		padding: 0 20rpx;
		border-radius: 6rpx;
		background-color: #ccc;
	}
	.topOptionsButton{
		background-color: white;
		border:1rpx solid #ccc;
	}
	.chooseUser{
		background-color: orange;
	}
	.title {
		font-size: 26rpx;
		color: #fa5245;
		line-height: 1;
		text-align: center;
		padding-bottom: 20rpx;
		padding-top: 50rpx;
	}

	.options {
		width: 670rpx;
		border-radius: 6rpx;
		border: 1rpx solid #ccc;
		display: flex;
		align-items: center;
		height: 86rpx;
		padding: 0 40rpx;
		margin: 0 auto;
		margin-top: 30rpx;
		justify-content: space-between;
	}

	.optionsLeft {
		font-size: 30rpx;
		color: #ccc;
	}

	.optionsBottomTitle {
		font-size: 30rpx;
		color: #ccc;
	}

	.optionsRight {
		display: flex;
		align-items: center;
		font-size: 30rpx;
		text-align: right;
	}

	.optionsBottomBottom {
		font-size: 30rpx;
		margin-top: 20rpx;
	}

	.position {
		max-width: 360rpx;
	}

	.positionIcon {
		width: 27rpx;
		height: 38rpx;
		margin-left: 25rpx;
	}

	.sanjia {
		width: 23rpx;
		height: 18rpx;
		margin-left: 20rpx;
	}

	.kongge {
		width: 20rpx;
	}

	.optionsBottomBox {
		width: 670rpx;
		border-radius: 6rpx;
		border: 1rpx solid #ccc;
		padding: 20rpx 40rpx;
		margin: 0 auto;
		margin-top: 30rpx;
	}

	.line {
		height: 26rpx;
		background: #f7f7f7;
		margin-top: 30rpx;
	}

	.uploadFile {
		width: 184rpx;
		height: 143rpx;
		margin: 0 auto;
		margin-top: 10rpx;
	}

	.wordBox {
		padding: 20rpx 80rpx;
	}

	.wordBox text {
		color: #fa5245;
	}

	.wordOptions {
		font-size: 22rpx;
		color: #ccc;
	}

	.bottomOptions {
		width: 670rpx;
		padding: 20rpx 40rpx;
		margin: 0 auto;
		margin-top: 30rpx;
		border: 1rpx solid #ccc;
		border-radius: 6rpx;
	}

	.bottomTitle {
		color: #ccc;
	}

	.bottomOptionsBox {
		margin-top: 20rpx;
		display: flex;
		flex-wrap: wrap;
	}

	.bottomOptionsBoxIn {
		width: 290rpx;
		display: flex;
		align-items: center;
		height: 45rpx;
	}

	.chooseIcon {
		width: 28rpx;
		height: 27rpx;
	}

	.bottomOptionsTitle {
		margin-left: 28rpx;
	}

	.button {
		width: 570rpx;
		line-height: 84rpx;
		text-align: center;
		margin: 0 auto;
		margin-top: 50rpx;
		border-radius: 6rpx;
		background: linear-gradient(90deg, #fa5444, #ff988f);
		font-size: 28rpx;
		color: white;

	}

	.bottom {
		height: 160rpx;
	}
</style>
